import BasePlugin from './BasePlugin';
import * as fabricModule from 'fabric';
const fabric = fabricModule.fabric || fabricModule;

/**
 * 形状插件 - 处理基础形状的创建和操作
 */
export default class ShapePlugin extends BasePlugin {
    constructor() {
        super();
        this.shapeDefaults = {
            fill: '#ffffff',
            stroke: '#000000',
            strokeWidth: 1,
            opacity: 1,
            cornerColor: '#0099ff',
            cornerSize: 8,
            transparentCorners: false
        };
        this.currentShape = null;
        this.isDrawing = false;
        this.startPoint = null;
    }

    /**
     * 初始化插件
     */
    init(editor) {
        super.init(editor);
        this._setupEventListeners();
    }

    /**
     * 设置形状默认样式
     */
    setShapeDefaults(options = {}) {
        Object.assign(this.shapeDefaults, options);
    }

    /**
     * 创建矩形
     */
    createRectangle(options = {}) {
        if (!this.isEnabled() || !this.canvas) return;

        const rect = new fabric.Rect({
            ...this.shapeDefaults,
            ...options,
            width: options.width || 100,
            height: options.height || 100,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 50
        });

        this.canvas.add(rect);
        this.canvas.setActiveObject(rect);
        this._emitShapeEvent('create', rect);
        return rect;
    }

    /**
     * 创建圆形
     */
    createCircle(options = {}) {
        if (!this.isEnabled() || !this.canvas) return;

        const circle = new fabric.Circle({
            ...this.shapeDefaults,
            ...options,
            radius: options.radius || 50,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 50
        });

        this.canvas.add(circle);
        this.canvas.setActiveObject(circle);
        this._emitShapeEvent('create', circle);
        return circle;
    }

    /**
     * 创建椭圆
     */
    createEllipse(options = {}) {
        if (!this.isEnabled() || !this.canvas) return;

        const ellipse = new fabric.Ellipse({
            ...this.shapeDefaults,
            ...options,
            rx: options.rx || 50,
            ry: options.ry || 30,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 30
        });

        this.canvas.add(ellipse);
        this.canvas.setActiveObject(ellipse);
        this._emitShapeEvent('create', ellipse);
        return ellipse;
    }

    /**
     * 创建三角形
     */
    createTriangle(options = {}) {
        if (!this.isEnabled() || !this.canvas) return;

        const triangle = new fabric.Triangle({
            ...this.shapeDefaults,
            ...options,
            width: options.width || 100,
            height: options.height || 100,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 50
        });

        this.canvas.add(triangle);
        this.canvas.setActiveObject(triangle);
        this._emitShapeEvent('create', triangle);
        return triangle;
    }

    /**
     * 创建线条
     */
    createLine(options = {}) {
        if (!this.isEnabled() || !this.canvas) return;

        const points = options.points || [0, 0, 100, 100];
        const line = new fabric.Line(points, {
            ...this.shapeDefaults,
            ...options,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 50
        });

        this.canvas.add(line);
        this.canvas.setActiveObject(line);
        this._emitShapeEvent('create', line);
        return line;
    }

    /**
     * 创建多边形
     */
    createPolygon(points, options = {}) {
        if (!this.isEnabled() || !this.canvas || !points || points.length < 3) return;

        const polygon = new fabric.Polygon(points, {
            ...this.shapeDefaults,
            ...options,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 50
        });

        this.canvas.add(polygon);
        this.canvas.setActiveObject(polygon);
        this._emitShapeEvent('create', polygon);
        return polygon;
    }

    /**
     * 创建文本
     */
    createText(text, options = {}) {
        if (!this.isEnabled() || !this.canvas) return;

        const textObj = new fabric.Text(text || '文本', {
            ...this.shapeDefaults,
            ...options,
            left: options.left || this.canvas.width / 2 - 50,
            top: options.top || this.canvas.height / 2 - 10,
            fontSize: options.fontSize || 20,
            fontFamily: options.fontFamily || 'Arial'
        });

        this.canvas.add(textObj);
        this.canvas.setActiveObject(textObj);
        this._emitShapeEvent('create', textObj);
        return textObj;
    }

    /**
     * 开始自由绘制
     */
    startDrawing(options = {}) {
        if (!this.isEnabled() || !this.canvas || this.isDrawing) return;

        this.isDrawing = true;
        this.canvas.isDrawingMode = true;
        this.canvas.freeDrawingBrush.color = options.color || this.shapeDefaults.stroke;
        this.canvas.freeDrawingBrush.width = options.width || this.shapeDefaults.strokeWidth;
        this._emitShapeEvent('drawingStart');
    }

    /**
     * 结束自由绘制
     */
    stopDrawing() {
        if (!this.isEnabled() || !this.canvas || !this.isDrawing) return;

        this.isDrawing = false;
        this.canvas.isDrawingMode = false;
        this._emitShapeEvent('drawingEnd');
    }

    /**
     * 设置形状属性
     */
    setShapeProperties(shape, properties = {}) {
        if (!this.isEnabled() || !this.canvas || !shape) return;

        shape.set(properties);
        shape.setCoords();
        this.canvas.renderAll();
        this._emitShapeEvent('update', shape);
    }

    /**
     * 获取形状属性
     */
    getShapeProperties(shape) {
        if (!shape) return null;

        return {
            type: shape.type,
            left: shape.left,
            top: shape.top,
            width: shape.width,
            height: shape.height,
            fill: shape.fill,
            stroke: shape.stroke,
            strokeWidth: shape.strokeWidth,
            opacity: shape.opacity,
            angle: shape.angle,
            scaleX: shape.scaleX,
            scaleY: shape.scaleY
        };
    }

    /**
     * 发送形状事件
     */
    _emitShapeEvent(type, shape = null) {
        this.editor.emit('shape:' + type, {
            type,
            shape
        });
    }

    /**
     * 设置事件监听
     */
    _setupEventListeners() {
        if (!this.canvas) return;

        // 监听鼠标按下事件
        this.canvas.on('mouse:down', (e) => {
            if (!this.isEnabled() || !this.isDrawing) return;

            this.startPoint = this.canvas.getPointer(e.e);
            this.currentShape = null;
        });

        // 监听鼠标移动事件
        this.canvas.on('mouse:move', (e) => {
            if (!this.isEnabled() || !this.isDrawing || !this.startPoint) return;

            const pointer = this.canvas.getPointer(e.e);

            if (this.currentShape) {
                // 更新形状尺寸
                const width = pointer.x - this.startPoint.x;
                const height = pointer.y - this.startPoint.y;

                if (this.currentShape instanceof fabric.Rect) {
                    this.currentShape.set({
                        width: Math.abs(width),
                        height: Math.abs(height)
                    });
                } else if (this.currentShape instanceof fabric.Circle) {
                    const radius = Math.sqrt(width * width + height * height) / 2;
                    this.currentShape.set({ radius });
                }

                this.currentShape.setCoords();
                this.canvas.renderAll();
            }
        });

        // 监听鼠标松开事件
        this.canvas.on('mouse:up', () => {
            if (!this.isEnabled() || !this.isDrawing) return;

            if (this.currentShape) {
                this._emitShapeEvent('create', this.currentShape);
            }

            this.startPoint = null;
            this.currentShape = null;
        });

        // 监听对象修改事件
        this.canvas.on('object:modified', (e) => {
            if (!this.isEnabled()) return;

            const shape = e.target;
            if (shape) {
                this._emitShapeEvent('modify', shape);
            }
        });
    }

    /**
     * 销毁插件
     */
    destroy() {
        if (this.canvas) {
            this.stopDrawing();
            this.currentShape = null;
            this.startPoint = null;
        }
        super.destroy();
    }
} 